{include file="public/header"}
<body>
<div id="app" v-cloak>
    <div class="ht-main">
        <div class="ht-main-body">
            <el-descriptions :column="5" title="图标列表"  border >
                <el-descriptions-item label-class-name="my-label-header">
                    <template slot="label">
                        无
                    </template>
                    <span style="cursor: pointer" @click="iconSelect('')">不使用</span>
                </el-descriptions-item>
                <el-descriptions-item v-for="item in data_list" :key="item.id" class="abcd" label-class-name="my-label">
                    <template slot="label">
                        <i :class="item.icon" :style="{'color:red':current == item.icon}"></i>
                    </template>
                    <span style="cursor: pointer" @click="iconSelect(item.icon)">{{item.icon}}</span>
                </el-descriptions-item>
            </el-descriptions>
        </div>
    </div>
</div>
<style>
    .my-label-header{
        font-size: 16px;
        text-align: center !important;
    }
    .active {
        color: red;
    }
    .my-label {
        text-align: center !important;
        cursor: pointer;
        font-size: 28px;
    }
    .my-label:hover{
        color: #00a0e9;
    }
</style>
{include file="public/common"}
<script>
    let vm = new Vue({
        el:"#app",
        data:function () {
            return {
                data_list:[],
                current:''
            }
        },
        created() {
            this.getData()
            this.current = parent.vm.editData.icon
            console.log(this.current)
        },
        methods: {
            getData() {
                var that = this
                $.post('{:url("Auth/getIcon")}').then((res)=>{
                    that.data_list = res.data
                })
            },
            goBack(){
                this.is_edit = false
            },
            iconSelect(v) {
                parent.vm.editData.icon = v
                parent.layer.closeAll()
            },
        }
    })
</script>
</body>
</html>
